<template>
  <div style="padding: 10px; box-sizing: border-box">
    <div>
      <div class="mumber-box">
        <div class="mumber" v-for="(it, index) in data.users" :key="index">
          <div class="mum" :style="{ color: index > 2 ? '#FF8080' : '#5E95FF' }">{{ it.num }}</div>
          <div class="mum-title">{{ it.name }}</div>
        </div>
      </div>
      <a-row :gutter="10">
        <a-col :span="6">
          <div class="box-bg">
            <div class="box-bg-title">
              <span class="title-text">客户来源统计</span>
            </div>
            <div class="item" ref="homeVolChart"></div>
          </div>
        </a-col>
        <a-col :span="12">
          <div class="box-bg">
            <div class="box-bg-title">
              <span class="title-text">回款面积图</span>
              <div class="title-chose">
                <span
                  v-for="item in data.priceArray"
                  :key="item.key"
                  :class="item.key == data.cur ? 'cur' : ''"
                  @click="changePrice(item)"
                  >{{ item.name }}</span
                >
              </div>
            </div>
            <div class="item" ref="homeLineChart"></div>
          </div>
        </a-col>
        <a-col :span="6">
          <div class="box-bg">
            <div class="box-bg-title">
              <span class="title-text">客户类型分布统计</span>
            </div>
            <div class="item" ref="homePieChart"></div>
          </div>
        </a-col>
      </a-row>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { onMounted, nextTick, reactive, ref, unref, markRaw } from 'vue';
  import {
    getSourceInfo,
    getTypeInfo,
    getGatherInfo,
    getCustomerInfo,
  } from '/@/api/erp/customer/workbench';

  import * as echarts from 'echarts';

  const formate = (name) => {
    let str = name + '：';
    data.dataOne.forEach((o: any) => {
      if (name == o.name) {
        str += o.value + '家';
      }
    });
    return str;
  };
  const formateTwo = (name) => {
    let str = name + '：';
    data.dataTwo.forEach((o: any) => {
      if (name == o.name) {
        str += o.value + '家';
      }
    });
    return str;
  };
  const data = reactive({
    users: [] as any[],
    // 玫瑰饼图
    dataOne: [],
    pieOption: {
      color: ['#7EAAFF', '#6D68F8', '#9E9BFC'],
      legend: {
        orient: 'horizontal',
        x: 'center',
        y: 'bottom',
        top: '78%',
        itemWidth: 10,
        itemHeight: 10,
        itemGap: 20,
        padding: [5, 5, 5, 5],
        textStyle: {
          color: '#85878e',
        },
        formatter: formate,
      },
      series: {
        name: '',
        type: 'pie',
        radius: [0, 85],
        center: ['50%', '32%'],
        roseType: 'area',
        itemStyle: {
          borderRadius: 0,
        },
        label: {
          color: '#6e7079',
          overflow: 'none',
          formatter: (params) => {
            let per = params.percent || 0;
            return params.name + '\n' + per + '%';
          },
        },
        data: [],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)',
          },
        },
      },
    },
    //漏斗图
    dataTwo: [],
    FunnelOption: {
      color: ['#9E9BFC', '#6D68F8', '#5887E3', '#7EAAFF', '#8CB1F9'],
      legend: {
        orient: 'horizontal',
        x: 'center',
        y: 'bottom',
        top: '78%',
        itemWidth: 10,
        itemHeight: 10,
        itemGap: 20,
        padding: [5, 5, 5, 5],
        textStyle: {
          color: '#85878e',
        },
        formatter: formateTwo,
      },
      series: {
        name: '',
        type: 'funnel',
        width: '60%',
        height: '60%',
        left: '5%',
        top: 30,
        labelLine: {
          show: false,
        },
        label: {
          color: '#6e7079',
          formatter: '{b} {d}%',
        },
        data: [],
      },
    },
    // 折线图
    priceArray: [] as any[],
    cur: 0,
    myChart3: null as any,
    lineOption: {
      tooltip: {
        trigger: 'axis',
      },
      grid: {
        left: 50,
        right: 40,
      },
      color: ['#9863c1'],
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: [],
      },
      yAxis: {
        type: 'value',
        name: '单位：万元',
      },
      series: [
        {
          data: [],
          type: 'line',
          showSymbol: false,
          areaStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: 'rgba(140, 125, 252, 0.6)',
              },
              {
                offset: 1,
                color: 'rgba(140, 125, 252, 0)',
              },
            ]),
          },
          smooth: true,
        },
      ],
    },
  });

  const homePieChart = ref<HTMLDivElement>();
  const homeLineChart = ref<HTMLDivElement>();
  const homeVolChart = ref<HTMLDivElement>();

  onMounted(async () => {
    let res = await getCustomerInfo();
    data.users = res || [];
    let res1 = await getSourceInfo();
    data.dataTwo = res1 || [];
    let res2 = await getGatherInfo();
    data.priceArray = res2 || [];
    let res3 = await getTypeInfo();
    data.dataOne = res3 || [];

    data.pieOption.series.data = data.dataOne;
    data.FunnelOption.series.data = data.dataTwo;
    nextTick(() => {
      let myChart = markRaw(echarts.init(unref(homePieChart) as HTMLDivElement));
      myChart.setOption(data.pieOption, true);
      myChart.resize(); //显示区域大小发生改变更新图表

      data.myChart3 = markRaw(echarts.init(unref(homeLineChart) as HTMLDivElement));
      changePrice(data.priceArray[0]);

      let myChart1 = markRaw(echarts.init(unref(homeVolChart) as HTMLDivElement));
      myChart1.setOption(data.FunnelOption, true);
      myChart1.resize(); //显示区域大小发生改变更新图表
    });
  });

  const changePrice = (o) => {
    data.cur = o.key;
    data.lineOption.xAxis.data = o.category;
    data.lineOption.series[0].data = o.data;
    data.myChart3.setOption(data.lineOption, true);
    data.myChart3.resize(); //显示区域大小发生改变更新图表
  };
</script>

<style lang="less" scoped>
  .title-chose {
    float: right;
    margin-right: 20px;

    span {
      text-align: center;
      padding: 0 12px;
      display: inline-block;
      color: #333;
      height: 30px;
      line-height: 30px;
      font-size: 14px;
      cursor: pointer;
      margin-left: 10px;

      &.cur,
      &:active {
        background-color: #5e95ff;
        color: #fff;
      }
    }
  }

  .box-bg {
    background-color: #fff;
    box-sizing: border-box;
    border-radius: 5px;
    box-shadow: 0 3px 6px 1px rgb(0 0 0 / 10%);

    .box-bg-title {
      border-bottom: 1px solid #eee;
      height: 50px;
      line-height: 50px;
      font-size: 16px;
      box-sizing: border-box;
    }

    .title-text {
      padding: 0 15px;
    }

    .item {
      padding: 10px 0 0 10px;
      width: 100%;
      height: 370px;
    }
  }

  .mumber-box {
    margin: 2px -5px 10px;
    display: flex;
    justify-content: space-between;

    .mumber {
      padding: 20px;
      box-sizing: border-box;
      margin: 0 5px;
      flex: 1;
      height: 120px;
      background: #fff;
      box-shadow: 0 3px 6px 1px rgb(0 0 0 / 10%);
      border-radius: 20px;
    }

    .mum-title {
      font-size: 14px;
      text-align: center;
      color: #333;
    }

    .mum {
      font-size: 48px;
      font-weight: bolder;
      margin: -10px 0 10px;
      height: 75%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }

  .ant-col {
    padding: 0 10px;
    margin-bottom: 20px;
  }
</style>
